<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="template">
<head>
    <title>Think管理系统 | 角色管理</title>
</head>
<body>
<div th:fragment="content">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            角色管理
            <small>角色增删改查</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">角色管理</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-head">
                        <!-- -->
                        <form class="form-horizontal">
                            <div class="col-xs-12 bg-red">
                                <div class="form-group col-xs-4 bg-green">
                                    <label for="inputEmail3" class="col-xs-3 control-label">Email</label>

                                    <div class=" col-xs-9">
                                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
                                    </div>
                                </div>
                                <div class="form-group col-xs-4 bg-yellow">
                                    <label for="inputPassword3" class="col-xs-3 control-label">Password</label>

                                    <div class=" col-xs-9">
                                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
                                    </div>
                                </div>
                                <div class="form-group col-xs-4 bg-yellow">
                                    <label for="inputPassword3" class="col-xs-3 control-label">Password</label>

                                    <div class=" col-xs-9">
                                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
                                    </div>
                                </div>
                                <div class="form-group col-xs-4 bg-blue pull-right">
                                    <button type="submit" class="btn btn-info pull-right">查询</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="box-body">
                        <a class="btn btn-primary btn-sm" title="添加角色"><i class="fa fa-plus"></i> <span> 添加角色</span></a>
                        <table id="example2" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>角色名</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="role,stat:${roles}">
                                <td th:text="${role.roleId}">Trident</td>
                                <td th:text="${role.roleName}">Internet
                                    Explorer 4.0
                                </td>
                                <td th:text="${#dates.format(role.createTime,'yyyy-MM-dd HH:mm:ss')}">Win 95+</td>
                                <td th:text="${#dates.format(role.updateTime,'yyyy-MM-dd HH:mm:ss')}"> 4</td>
                                <td>
                                    <a class="btn btn-primary btn-xs" title="编辑"
                                       href="/role/edit/1"><i class="fa fa-edit"></i></a>
                                    <a class="btn btn-primary btn-xs" title="分配权限"
                                       href="/role/edit/1"><i class="fa fa-wrench"></i></a>
                                    <a class="btn btn-danger btn-xs" title="删除"  data-tiggle="ajax"
                                       data-submit-url="/system/user/delete?id=42932bb049ac4e1d95c230870e6e8b95"
                                       data-confirm="您确定要删除该条记录吗?"><i class="fa fa-trash" ></i></a>
                                </td>
                            </tr>
                            </tbody>
                            <!--
                            <tfoot>
                            <tr>
                                <th>Role Id</th>
                                <th>角色名</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>
                            -->
                        </table>
                    </div>
                    <!-- box-footer -->
                    <div class="box-footer">
                        <div class="col-md-6">
                            每页<select class="form-control" name="size" style="width: auto;display: initial;margin: 0 5px;" onchange="changePage(this)">
                            <option value="15">15条</option>
                            <option value="30">30条</option>
                            <option value="100" selected="selected">100条</option>
                            <option value="250">250条</option>
                            <option value="500">500条</option>
                        </select>条
                            显示 1  -  100 条  共 4 条记录
                        </div>
                        <div class="col-md-6 pull-left">


                            <ul class="pagination pagination-sm no-margin pull-right">

                                <li><a href="javascript:void(0)">«</a></li>


                                <li class="active"><a href="javascript:void(0)">1</a></li>

                                <li><a href="javascript:void(0)">»</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- ./box-footer -->
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>
</body>
</html>